<template>
  <div class="audition88">
    <h3>html5新特性：</h3>
    <p>1. 语义化标签</p>
    <p>
      header , main , aside , section , article , footer , nav
    </p>
    <p>2. 增强型表单</p>
    <p>input新增了一些type类型，比如 </p>
    <p>color / email / url / tel / range / date 等</p>
    <p>新增了一些标签，比如 datalist，用法举例：</p>
    <v-md-preview :text="text1" />
    <p>相当于自带了搜索和选择功能，很强大</p>
    <p>input属性增加了autofocus / required / multiple / pattern等</p>
    <p>3. 视频和音频</p>
    <p>4. canvas绘图</p>
    <p>5. svg绘图</p>
    <p>6. 地理定位</p>
    <code class="code">
      var geo = navigator.geolocation<br />
      function success(pos) {<br />
        <span class="indient">var crd = pos.coords</span><br />
        <span class="indient">console.log(crd)</span><br />
      }<br />
      function error(err) {<br />
        <span class="indient">console.log(err)</span><br />
      }<br />
      if (geo) {<br />
        <span class="indient">geo.getCurrentPosition(success, error)</span><br />
      }
    </code>
    <p>7. 拖放Api</p>
    <p>推荐阅读：<a href="https://blog.csdn.net/tuzi007a/article/details/123832167" target="_blank">MDN扫盲之web事件 / 拖放事件</a></p>
    <p>8. WebWorker</p>
    <p>9. WebStorage</p>
    <p>10. WebSocket</p>
    <p>-------------------------------</p>
    <h3>html5标签兼容性处理：</h3>
    <p>1. 在页面引入html5shiv.js</p>
    <p>2. 添加样式 </p>
    <code class="code">
      header, main, aside, nav, section, article {<br />
        <span class="indient">display: block;</span><br />
      }
    </code>
    <p>原理是用document.createElement()创建html5标签</p>
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition88',
  data() {
    return {
      text1: `${prefix}
      <input type="text" list="datas">
      <datalist id="datas">
        <option value="111"></option>
        <option value="222"></option>
        <option value="333"></option>
        <option value="444"></option>
      </datalist>
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>